/* eslint-disable no-alert */
<template>
  <div class="aliyun-player">
    <div
      id="aliPlayer"
      ref="playerContent"
    >
      <div>
      </div>
    </div>
  </div>
</template>

<script>
import PreviewExtension from './PreviewExtension';

export default {
  name: 'AliyunPlayer',

  mixins: [PreviewExtension],
  components: {},
  props: {
    vid: {
      type: String,
      default: '',
    },
    playAuth: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      player: null,
      isLook: true,
      danmukuList: [],
      skinLayout: [
        {
          name: 'bigPlayButton',
          align: 'cc',
        },
        {
          name: 'H5Loading',
          align: 'cc',
        },
        {
          name: 'controlBar',
          align: 'blabs',
          x: 0,
          y: 0,
          children: [
            {
              name: 'progress',
              align: 'blabs',
              x: 0,
              y: 44,
            },
            {
              name: 'playButton',
              align: 'tl',
              x: 15,
              y: 12,
            },
            {
              name: 'timeDisplay',
              align: 'tl',
              x: 10,
              y: 7,
            },
            // {
            //   name: 'stream',
            //   align: 'tr',
            //   x: 10,
            //   y: 12,
            // },
            {
              name: 'snapshot',
              align: 'tr',
              x: 5,
              y: 12,
            },
            {
              name: 'fullScreenButton',
              align: 'tr',
              x: 10,
              y: 12,
            },
            {
              name: 'setting',
              align: 'tr',
              x: 15,
              y: 12,
            },
            {
              name: 'volume',
              align: 'tr',
              x: 5,
              y: 10,
            },
          ],
        },
      ],
    };
  },
  mounted() {
    console.log('mounted');
    console.log('mounted', this.vid);
    this.setPlayer();
  },

  methods: {
    setPlayer() {
      if (this.vid && this.playAuth) {
        this.player = new window.Aliplayer(
          {
            id: 'aliPlayer',
            useH5Prism: true,
            width: '100%',
            autoplay: false,
            vid: this.vid,
            playauth: this.playAuth,
            height: '100%',
            isLive: false,
            controlBarVisibility: 'click', //  弹幕
            components: [
              {
                name: 'QualityComponent',
                type: window.AliPlayerComponent.QualityComponent,
              },
              // 倍速播放
              {
                name: 'RateComponent',
                type: window.AliPlayerComponent.RateComponent,
              },
              // 弹幕
              {
                name: 'AliplayerDanmuComponent',
                type: window.AliPlayerComponent.AliplayerDanmuComponent,
                args: [this.danmukuList],
              },
              // {
              //   name: 'StartADComponent',
              //   type: window.AliPlayerComponent.StartADComponent,
              //   args: [
              //     'https://img.alicdn.com/tfs/TB1byi8afDH8KJjy1XcXXcpdXXa-1920-514.jpg',
              //     'https://promotion.aliyun.com/ntms/act/videoai.html',
              //     3,
              //   ],
              // },
              // {
              //   name: 'PauseADComponent',
              //   type: window.AliPlayerComponent.PauseADComponent,
              //   args: [
              //     'https://img.alicdn.com/tfs/TB1byi8afDH8KJjy1XcXXcpdXXa-1920-514.jpg',
              //     'https://promotion.aliyun.com/ntms/act/videoai.html',
              //   ],
              // },
              // {
              //   name: 'VideoADComponent',
              //   type: window.AliPlayerComponent.VideoADComponent,
              //   args: [
              //     'https://player.alicdn.com/ad/citybrain.mp4',
              //     'https://baidu.com',
              //     this.videoAdClose,
              //     'VIP关闭广告',
              //   ],
              // },
            ],
            skinLayout: this.skinLayout,
          },
          (player) => {
            console.log('player=', player);
            player.on('ready', () => {
              console.log('播放准备好了');
            });
            player.on('play', () => {
              console.log('播放视频');
              // 是否可以试看,  如果允许 调用试看函数
              this.vidoePreview(5, 'aliyun');
            });
            player.on('pause', () => {
              console.log('播放暂停视频了');
            });
            player.on('replay', () => {
              console.log('重播视频了');
            });
            player.on('ended', () => {
              console.log('当前视频播放完毕时触发');
            });
            player.on('startSeek', (a) => {
              console.log('当前视频播放完毕时触发', a);
            });

            player.on('sourceloaded', (params) => {
              const { paramData } = params;
              const { desc } = paramData;
              const { definition } = paramData;
              player
                .getComponent('QualityComponent')
                .setCurrentQuality(desc, definition);
            });

            // player.on('seek', (time) => {
            //   console.log('跳转到某个时刻进行播放', time);
            // });
            // player.on('getCurrentTime', () => {
            //   console.log('获取当前的播放时刻，返回的单位为秒');
            // });
            // player.on('setVolume', () => {
            //   console.log('设置音量');
            // });
          },
        );
      }
    },
    // 关闭广告
    videoAdClose() {},
    // 暂定
    pause() {
      this.player.pause();
      console.log(' this.player=', this.player);
    },
  },
};
</script>
<style lang="scss" scoped>
.aliyun-player {
  width: 100%;
  height: 100%;
  #item-player {
    width: 100%;
    height: 100%;
  }
}
</style>
